import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Link, useHistory } from 'react-router-dom'
import { Layout, Menu, Breadcrumb, Row, Col, Button, Tabs, Space, message, PageHeader, Card, Table } from 'antd';
import { Modal, Image, Select, Input } from 'antd'
import { UserOutlined, LaptopOutlined, NotificationOutlined, SearchOutlined } from '@ant-design/icons';
import axios from 'axios'
import UserInfoDialog from './userInfoDialog'
import { checkAdmin } from '../../../utils/loginUtils/loginMethod'
import api from '../../../utils/requestUtils/apiConfig'
export default ({
    coachInfoList,
    setCoachInfoList,
    coachInfo
}) => {
    const { TabPane } = Tabs;
    const history = useHistory()
    
    /*************************************** */
    const [dataSource, setDataSource] = useState([])
    const [tableLoading, setTableLoading] = useState(false)
    const [visible, setVisible] = useState(false)
    const [defaultValue, setDefaultValue] = useState({})
    const [option, setOption] = useState('save')
    const [repeat, setRepeat] = useState(0)
    const [type, setType] = useState(1)
    const [question, setQuestion] = useState('')
    const [deleteVisible, setDeleteVisible] = useState(false)
    const [id, setId] = useState(0)
    const [trueName ,setTrueName] = useState("")

    //表格数据获取
    const queryUserInfo = async () => {
        setTableLoading(true)
        await axios({
            url: api.queryUserInfo,
            method: 'get',
            headers: '',
            params: {},
        }).then((res) => {
            const result = res.data.data
            const message = res.data.message
            if (message == 'success') {
                setDataSource(result)
            }
            else {
                setDataSource([])
            }
            setTableLoading(false)
        })
    }
    //教练信息获取
    const queryAllCoach = () => {
        axios({
            url: api.queryAllCoach,
            method: 'get',
            headers: '',
            params: {},
        }).then((res) => {
            const result = res.data.data
            const coachDataSource = []
            const coachInfo = new Map()
            result.forEach(item => {
                coachDataSource.push({
                    label: item.trueName,
                    value: item.id
                })
                coachInfo.set(item.id, item.trueName)
            })
            setCoachInfoList(coachDataSource)
        })
    }



    const columns = [

        {
            title: '真实姓名',
            dataIndex: 'trueName',
        },
        {
            title: '用户名',
            dataIndex: 'username',
        },
        {
            title: '密码',
            dataIndex: 'password',
        },
        {
            title: '教练',
            dataIndex: 'coachId',
            render: (text, record, index) => {
                const trueName = coachInfo.get(text)
                return (
                    <span>{trueName}</span>
                )
            }
        },
        {
            title: '角色',
            dataIndex: 'type',
            render: (text, record, index) => {
                if (text == 0) { return (<span>管理员</span>) }
                if (text == 1) { return (<span>教练</span>) }
                if (text == 2) { return (<span>学员</span>) }
            }
        },
        {
            title: '操作',
            // dataIndex: 'optionFour',
            render: (text, record, index) => {
                return (
                    <Space>

                        <Button onClick={() => {
                            setDefaultValue(record)
                            setOption('update')
                            setVisible(true)
                        }}>
                            编辑
                        </Button>
                        <Button onClick={() => {
                            setId(record.id)
                            setDeleteVisible(true)
                        }}>
                            删除
                        </Button>
                    </Space>
                )
            }
        },
    ]


    const handleSearch = async () => {

        const params = {
            trueName: trueName,
            type: type,
        }
        setTableLoading(true)
        await axios({
            url: api.queryUserInfoByCondition,
            method: 'post',
            headers: '',
            params: '',
            data: params
        }).then((res) => {
            const result = res.data.data
            const message = res.data.message
            if (message == 'success') {
                setDataSource(result)
            }
            else {
                setDataSource([])
            }
            setTableLoading(false)
        })
    }

    const handleOk = () => {
        const params = {
            id: id
        }
        axios({
            url: api.deleteUserInfoById,
            method: 'get',
            headers: '',
            params: params,
        }).then((result) => {
            const mes = result.data.message
            if (mes == 'success') {
                message.success("删除成功")
                setRepeat(repeat + 1)
            }
            else {
                message.error("删除失败")
            }

            setDeleteVisible(false)
        })
    }

    const saveQuestion = () => {
        setDefaultValue({})
        setOption('save')
        setVisible(true)
    }
    const userType = [
        { label: "管理员", value: 0 },
        { label: "教练", value: 1 },
        { label: "学员", value: 2 },
    ]

    //表格数据获取
    useEffect(() => {
        queryUserInfo()
        queryAllCoach()
    }, [repeat])


    return (
        <div>
            <Space
                direction='vertical'
            >
                <Space>
                    <Space>
                        <span>用户类型：</span>
                        <Select
                            style={{ width: 300 }}
                            value={type}
                            options={userType}
                            onChange={(value) => {
                                setType(value)
                            }}
                        />
                    </Space>

                    <Space>
                        <span>真实姓名：</span>
                        <Input
                            style={{ width: 300 }}
                            placeholder="请输入真实姓名"
                            value={trueName}
                            onChange={(e) => { setTrueName(e.target.value) }}

                        />
                    </Space>

                    <Button onClick={() => { handleSearch() }} type="primary" icon={<SearchOutlined />}>
                        查询
                    </Button>

                    <Button
                        type='primary'
                        onClick={() => { saveQuestion() }}
                        style={{ marginLeft: 430 }}
                    > 添加用户</Button>
                </Space>

                <Space>
                    <Card
                        style={{ width: 1385 }}
                    >
                        <Table
                            bordered
                            loading={tableLoading}
                            columns={columns}
                            dataSource={dataSource}
                        />
                    </Card>
                </Space>
            </Space>
            <UserInfoDialog
                defaultValue={defaultValue}
                setDefaultValue={setDefaultValue}
                visible={visible}
                setVisible={setVisible}
                option={option}
                setRepeat={setRepeat}
                repeat={repeat}
                coachInfoList={coachInfoList}
                setCoachInfoList={setCoachInfoList}
                coachInfo={coachInfo}

            />
            <Modal
                title="确认删除"
                visible={deleteVisible}
                onOk={handleOk}
                okText="确认"
                cancelText="取消"
                onCancel={() => {
                    setDeleteVisible(false)
                }}
            // confirmLoading={confirmLoading}
            // onCancel={handleCancel}
            />

        </div>
    )
}


